<template>
    <div id="app">
        <div class="btn-group">
            <ArrowButton @click.native="add_server">加入游戏服务器</ArrowButton>
            <ArrowButton @click.native="startgame">游戏重置</ArrowButton>
            <a style="color: white; text-decoration: none"
               href="https://liuboyuan.notion.site/3e93a57e0dca4172ae3bda136905d7ec">
                <ArrowButton>社区</ArrowButton>
            </a>
        </div>
    </div>
</template>

<script>
    import ArrowButton from "@/components/button/ArrowButton.vue"

    export default {
        name: "GameMain",
        data() {
            return {
                image_background: require("../assets/image/background.webp")
            }
        },

        methods: {
            add_server() {

                let token = localStorage['token']
                if (token === undefined) {
                    this.$router.push("/newgame")
                    return
                }
                this.$axios.get(
                    `room/playerroom/?token=${token}`,
                ).then(
                    (response) => {
                        let datas = response.data;
                        if (datas == "none") this.$router.push("/newgame")
                        else this.$router.push("/room")

                    }
                )
            }
        },
        components: {
            ArrowButton,
        }
    }
</script>

<style scoped>
    .btn-group {
        position: relative;
        top: 30%;
        left: 100px;
    }

    #app {
        background: url("../assets/image/background.jpg") no-repeat;
        object-fit: cover !important;
        object-position: top;
        height: 100vh;
        width: 100vw;
    }
</style>